import React, { Component, Suspense, lazy } from 'react';
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';

import './index.css';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

export default class ReactRouterDemo extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="row">
          <ul className="nav nav-pills">
            <li className="nav-item">
              <NavLink className="nav-link" to="/about">About</NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/home">Home</NavLink>
            </li>
          </ul>
        </div>
        <Suspense fallback={<h2>Loading</h2>}>
          <Switch>
            <Route path="/about" component={About} exact />
            <Route path="/home" component={Home} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    )
  }
}
